<%@page import="java.util.List"%>
<%@page import="obs.PMF"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="obs.ClassThatDoesStuff"%>
<%@page import="obs.Pairing"%>
<%@page import="obs.UserData"%>
<%@page import="java.util.ArrayList"%>
<html>
    <head>
<!--        <link type="text/css" rel="stylesheet" href="main.css" />-->
    <link type="text/css" rel="stylesheet" href="bootstrap.css" />
    </head>
    <body>
        <%
            // Get the key to the user data from the session
            if (session.getAttribute("key") == null) {
        %>You are not logged in properly!
        <%                } else {
            String key = (String) session.getAttribute("key");

            UserData data = UserData.getUserDataByKey(key);
            if (data == null) {
        %>Could not find your user data!<%                    } else {



            // If an answer has just come in about a pairing
            // you need to store that


            if (request.getParameter("answer") != null) {
                int intAnswer = 0;
                String stringAnswer = (String) request.getParameter("answer");

                if (stringAnswer.equals("one")) {
                    intAnswer = -1;
                } else if (stringAnswer.equals("two")) {
                    intAnswer = 1;
                }

                data.getResponses()[data.getPairingId()] = intAnswer;

                // MOVE ON

                data.setPairingId(data.getPairingId() + 1);

                // CHECK WE HAVE NOT HIT THE END STARTING FROM 0 ETC ETC

//Hi Greg - I don't understand why if I change this to 20 it breaks it. 
                int NUM_SCENARIOS = 16;
                if (data.getPairingId() > NUM_SCENARIOS - 1) {
                    // THIS IS THE END
                    // THERE IS A WAY OF FORWARDING TO ANOTHER SCRIPT I'M SURE
                    // TIM TO DO - SEE IF WE CAN
                    // TIM TO DO - get rid of this
                    out.println("You've reached the end!");
                    out.flush();
                }

            }


        %>
<div class="page-header" style="text-align: center;">
  <h1>Observations Research Study</h1>

        <h2>Pair <%= data.getPairingId()+1%> of 16</h2></div>
        <%
            int[] pairings = data.getPairings();

            ClassThatDoesStuff doer = new ClassThatDoesStuff();

            Pairing pair = doer.getPairing(pairings[data.getPairingId()], data.getPool());

        %>
        
        </br>
<div class="container" style="text-align: center;">
    <h5> Please select which patient, A or B, you consider to be the most unwell. Remember all other factors are equal including the patients age.</h5>
</div></br>
<div class="hero-unit">
        <div class="row-fluid" >
            <div class="span12">
<!--        <div id="pairingsDiv">-->

</br>
            <form id="pairingsForm" method="get">
<!--                <div id="one">-->
                    <div class="row-fluid">
                        <div class="span2"></div>
                        
                        <div class="span3">
                           <ul> 
                               <li><h2> Observations </h2></li>
                        <li>Heart Rate (BPM)</li>
                        <li>Blood Pressure (mmHg)</li>
                        
                        <li>Conscious Level (AVPU scale)</li>
                       
                        <li>Respiration Rate (RPM)</li>
                        </br>
                        <li>Select Patient A or B</li>
                    </ul> 
                        </div>
                        
                         <div class="span3">
                        
                        <ul> 
                        <li> <h2>Patient A</h2></li>
                        <li><%= pair.getPatient1HR()%></li>
                        <li><%= pair.getPatient1BP()%></li>
                        
                        <li><%= pair.getPatient1GCS()%></li>
                        
                        <li><%= pair.getPatient1RR()%></li>
                        </br>
                        <li><input type="radio" name="answer" value="one"/></li>
                    </ul>
                    
                   
                </div>


<!--                <div id="two">-->
                     <div class="span3">
                    <ul>
                        <li> <h2>Patient B</h2></li>
                        <li><%= pair.getPatient2HR()%></li>
                        <li><%= pair.getPatient2BP()%></li>
                    
                        <li><%= pair.getPatient2GCS()%></li>
                       
                        <li><%= pair.getPatient2RR()%> </li>
                        </br>
                        <li><input type="radio" name="answer" value="two"/></li>

                    </ul>
                     
                   
                </div>
                    </div>
<!--                <div id="proceed">-->
                        <div class="row-fluid">
                         <div class="span3"> 
                             </br>
                             </br>
                             

                </div>
                <div class="clear"></div>
                        </div></div></div></div>
                <%--<div id="progress"> 

                    
                        out.print("|");
                        for(int i = 0; i < data.getPairingId(); i++) {
                            out.print("-");
                            
                        }
                        out.println("*");
                        for(int i = 0; i < (10-data.getPairingId()); i++) {
                            out.print("-");
                            
                        }
                        out.println("|");

                             
                </div>--%> 
<!--                <div class="row-fluid">-->
<!--            <div class="span12">-->
                </br>
                </br>
                </br>
                
                
                <div class="container" style="text-align: center;" >
                    
                     <button class="btn btn-primary" type="submit" value="Proceed">Proceed</button>
                     
                </br>
                </br>
                </br>
                     
                <div class="progress progress-striped active">
                   
<!--                    <div class="bar" style="width: 50%;"></div>  -->
  <div class="bar" style="width: <%out.print(6.25 * data.getPairingId());%>%;"></div>
                </div>
            </form>
        </div>
        <%


            data.persist();
        %>

    </body>
</html>
<% }
    }
%>